import React, {Component} from 'react';
import {IUserInfo, IUserInfoState} from './IFormProps';
import {Button, Form, FormInstance, Input, Popconfirm, Tag} from 'antd';

class UserInfoForm extends Component<IUserInfo, IUserInfoState> {

    formInstance = React.createRef<FormInstance>();

    state = {
        state: '',
        redirectUrl: '',
        URL: '',
        componentArray: [
            {
                name: 'appId',
                required: true,
                type: 'text',
                message: '请输入app id',
                placeholder: '输入app id',
                defaultValue: '',
            },
            {
                name: 'redirectUrl',
                required: true,
                type: 'text',
                message: '请输入redirectUrl',
                placeholder: '输入redirectUrl',
                defaultValue: '',
            },
            {
                name: 'state',
                required: false,
                type: 'text',
                message: '请输入state',
                placeholder: '输入state',
                defaultValue: '',
            },
        ],
    }

    async handleClick(): Promise<void> {
        const form = this.formInstance.current;
        if (form) {
            const {appId, redirectUrl, state} = form.getFieldsValue();
            this.state.URL = `https://open.feishu.cn/open-apis/authen/v1/index?redirect_uri=${encodeURIComponent(redirectUrl)}&app_id=${appId}&state=${state}`;
            this.setState({
                componentArray: [
                    ...this.state.componentArray,
                    {
                        name: 'url',
                        required: false,
                        type: 'success',
                        message: '',
                        placeholder: '输入state',
                        defaultValue: this.state.URL,
                    }]
            });
        }
        return;
    }

    async handleClear(): Promise<void> {
        return;
    }

    /**
     * 渲染组件
     */
    render(): React.ReactNode {
        return (
            <div>
                <Tag color="magenta">先确认信息</Tag>
                <Tag color="magenta">1、redirectUrl 跟开发者后台中配置的信息一致</Tag>
                <Tag color="magenta">2、state 根据需求填写，不知道就随便填</Tag>
                <Form layout="inline"
                      ref={this.formInstance}
                      initialValues={
                          {}
                      }
                >
                    {
                        this.state.componentArray.map((item, number) => {
                            if (item.type === 'success') {
                                return <Tag color="success">{item.defaultValue}</Tag>;
                            }
                            return (
                                <Form.Item
                                    key={number}
                                    name={item.name}
                                    rules={[{required: item.required, message: item.message}]}
                                >
                                    <Input
                                        type={item.type}
                                        placeholder={item.placeholder}
                                        value={item.defaultValue}
                                    />
                                </Form.Item>
                            );
                        })
                    }

                    <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
                        {() => (
                            <Button
                                type="primary"
                                onClick={this.handleClick.bind(this)}
                            >
                                确认信息
                            </Button>
                        )}
                    </Form.Item>
                    <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
                        {() => (
                            <Popconfirm
                                title="此操作将会同步清空服务端存储的信息？"
                                onConfirm={this.handleClear.bind(this)}
                                okText="确认"
                                cancelText="取消"
                            >
                                <Button danger>
                                    清空信息
                                </Button>
                            </Popconfirm>
                        )}
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default UserInfoForm;
